<template>
  <div>
    <ocean :use="form"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { GlobalAPI } from '@/app/api';
import { useForm } from '@/ocean';
import { NUpload } from 'naive-ui';

const { action, headers } = GlobalAPI.uploadFile();

const form = useForm();
form.item('图片', 'img').define(() => <NUpload
  action={action}
  headers={headers}
  listType="image-card"
  max={1}
  accept="image/*"
  on-finish={(e) => onFinish(e)}
></NUpload>)
form.item('内容', 'text').input({ type: 'textarea' })

const onFinish = (e) => {
  const res = JSON.parse(e.event.target.response);
  form.model.img = res.data;
}




defineExpose({
  getModel() {
    return form.model
  }
})


</script>